<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="questionPriviewVisible"
      width="60%"
      @close="onClose"
    >
      <div class="content">
        <el-descriptions title="" :column="4">
          <el-descriptions-item label="【题型】"></el-descriptions-item>
          <el-descriptions-item label="【编号】"></el-descriptions-item>
          <el-descriptions-item label="【难度】"></el-descriptions-item>
          <el-descriptions-item label="【标签】"></el-descriptions-item>
          <el-descriptions-item label="【学科】"></el-descriptions-item>
          <el-descriptions-item label="【目录】"></el-descriptions-item>
          <el-descriptions-item label="【方向】"></el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="select">
        <el-descriptions>
          <el-descriptions-item label="【题干】"></el-descriptions-item>
          <el-descriptions-item
            label="选项：（以下选中的选项为正确答案）"
          ></el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="answer">
        <el-descriptions title="">
          <el-descriptions-item label="【参考答案】"></el-descriptions-item>
        </el-descriptions>
        <el-button type="danger" size="small" v-if="isVideo" @click="isShowVideo"
          >视频答案预览</el-button
        >
        <!-- 视频 -->
        <video id="myVideo" class="video-js" v-else>
          <source src="" type="video/mp4" />
        </video>
      </div>
      <div class="anwserInfo">
        <el-descriptions title="">
          <el-descriptions-item label="【答案解析】"></el-descriptions-item>
        </el-descriptions>
      </div>
      <el-descriptions title="">
        <el-descriptions-item label="【题目备注】"></el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { choice } from '@/api/hmmm/questions'
export default {
  model: {
    prop: 'questionPriviewVisible'
  },
  props: {
    questionPriviewVisible: {
      type: Boolean,
      require: true
    }
  },
  data () {
    return {
      isVideo: true,
      onPlayerOptions: {
        autoplay: false,
        controls: true,
        muted: true,
        width: '50%',
        height: '50%',
        techOrder: ['html5', 'flash'],
        sources: [{
          src: '',
          type: ''
        }]
      }
    }
  },
  computed: {
    // player () {
    //   return this.$refs.videoPlayer.player
    // }
  },
  methods: {
    onClose () {
      this.$emit('input', false)
    },
    onSave () {
      this.$emit('input', false)
    },
    isShowVideo () {
      this.isVideo = false
    },
    async loadingQuestionDetail (item) {
      console.log(item.id)
      const res = await choice(item.id)
      console.log(res)
    }
  }
}
</script>

<style scoped lang="less">
.content,
.select,
.answer,
.anwserInfo {
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  border-bottom: 1px solid black;
}
.el-descriptions-item__container {
  width: 25%;
}
</style>
